<template>
  <ul class="todo-list">
    <!-- 2.2 循环任务-关联选中状态-铺设数据 -->
    <!-- completed: 完成的类名 -->
    <li
      :class="{ completed: obj.isDone === true }"
      v-for="obj in arr"
      :key="obj.id"
    >
      <div class="view">
        <input class="toggle" type="checkbox" v-model="obj.isDone" />
        <label>{{ obj.name }}</label>
        <!-- 4.0 注册点击事件 -->
        <button @click="delFn(obj.id)" class="destroy"></button>
      </div>
    </li>
  </ul>
</template>


<script>
export default {
  // 注意：不完全租售单项数据流--写代码更方便
  // 效果是完全争取的（无副作用）
  // props是只读的，不允许重新赋值
  // arr=新数组（这是赋值）
  // 页面勾选复选框，影响数组里对队形的属性改变，数组本身没变
  // list传给arr，数组内存地址，数组里保存的相同队形内存地址
  // item和数组里对象是同一个内存，b-model可以直接
  // 影响到父亲数组里的对象
  // 相当于子直接修改父数组对象值
  props: ['arr'],//父传子接收的父亲那边的list
  methods: {
    delFn (thenId) {
      this.$emit('delEv', thenId)
    }
  }

}
</script>